<template>
  <div class="personal-center">
    <!-- 头部信息 -->
    <div class="header">
      <el-button type="text" class="back-button">
        <el-icon><ArrowLeft /></el-icon>
      </el-button>
      <div class="user-info">
        <img :src="userAvatar" alt="用户头像" class="avatar">
        <div class="user-name">
          <p>{{ userName }}</p>
          <p>{{ userPhone }}</p>
        </div>
      </div>
    </div>
    <!-- 快捷入口 -->
    <div class="quick-entrance">
      <div 
        v-for="(item, index) in quickItems" 
        :key="index" 
        class="quick-item"
        @click="handleQuickItemClick(index)"
      >
        <img :src="item.icon" alt="快捷入口图标" class="item-icon">
        <span class="item-badge" v-if="item.badgeCount > 0">{{ item.badgeCount }}</span>
        <p>{{ item.name }}</p>
      </div>
    </div>
    <!-- 等待评价 -->
    <div class="await-evaluation">
      <div class="evaluation-item">
        <img :src="evaluationProductImage" alt="等待评价商品图片" class="product-image">
        <div class="evaluation-text">
          <p>等待评价</p>
          <p>感谢购物，期待您的评价~</p>
        </div>
        <el-button type="text" class="evaluate-button">评价</el-button>
      </div>
      <div class="pagination">
        <el-pagination
          v-model:current-page="currentPage"
          :page-sizes="[5, 10, 20]"
          :page-size="5"
          layout="prev, pager, next"
          :total="totalItems"
        />
      </div>
    </div>
    <!-- 其他功能入口 -->
    <div class="other-entrance">
      <div 
        v-for="(item, index) in otherItems" 
        :key="index" 
        class="other-item"
      >
        <img :src="item.icon" alt="功能图标" class="icon">
        <p>{{ item.name }}</p>
        <span class="dot" v-if="item.hasDot"></span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ArrowLeft } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
// 用户信息
const userAvatar = ref('https://example.com/avatar.png') // 替换为实际头像地址
const userName = ref('蒋主管')
const userPhone = ref('180****6666')

// 新增订单分类相关变量
const showOrderTabs = ref(false) // 控制订单分类栏显示
const orderTabs = ref(['全部订单', '待付款', '待完成', '已完成', '已取消']) // 订单状态分类
const activeTab = ref(0) // 当前选中的分类


// 快捷入口数据
const quickItems = ref([
  {
    name: '待付款',
    icon: 'https://example.com/pay-icon.png', // 替换为实际图标地址
    badgeCount: 1
  },
  {
    name: '待收货',
    icon: 'https://example.com/receive-icon.png', // 替换为实际图标地址
    badgeCount: 1
  },
  {
    name: '待评价',
    icon: 'https://example.com/evaluate-icon.png', // 替换为实际图标地址
    badgeCount: 1
  },
  {
    name: '全部订单',
    icon: 'https://example.com/order-icon.png', // 替换为实际图标地址
    badgeCount: 0
  }
])

// 等待评价数据
const evaluationProductImage = ref('https://example.com/product-image.png') // 替换为实际商品图片地址
const currentPage = ref(1)
const totalItems = ref(10)

// 其他功能入口数据
const otherItems = ref([
  {
    name: '商店消息',
    icon: 'https://example.com/message-icon.png', // 替换为实际图标地址
    hasDot: true
  },
  {
    name: '我的收藏',
    icon: 'https://example.com/favorite-icon.png', // 替换为实际图标地址
    hasDot: false
  },
  {
    name: '收货地址',
    icon: 'https://example.com/address-icon.png', // 替换为实际图标地址
    hasDot: false
  }
])

const router = useRouter()
// 快捷入口点击事件
const handleQuickItemClick = (index) => {
  if (index === 3) {
    router.push({ name: 'OrderList' }) // 假设路由配置中OrderList对应订单列表页面
  }
}
</script>

<style scoped>
/* 订单分类栏样式 */
.order-tabs {
  display: flex;
  background-color: white;
  padding: 15px 0;
  margin: 0 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  overflow-x: auto;
}

.order-tab {
  flex: 1;
  text-align: center;
  padding: 8px 0;
  font-size: 14px;
  color: #333;
  position: relative;
}

.order-tab.active {
  color: red;
  font-weight: 600;
}

.order-tab.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 3px;
  background-color: red;
  border-radius: 3px;
}

/* 订单列表区域样式 */
.order-list {
  background-color: white;
  margin: 15px 20px;
  border-radius: 8px;
  padding: 20px;
  min-height: 200px;
}

.empty-order {
  text-align: center;
  padding: 40px 0;
  color: #666;
}

.empty-order .hint {
  margin-top: 10px;
  font-size: 12px;
  color: #999;
}
.personal-center {
  background-color: #f5f5f5;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: red;
  color: white;
  padding: 20px;
}

.back-button {
  color: white;
}

.user-info {
  display: flex;
  align-items: center;
}

.avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin-right: 20px;
}

.user-name p {
  margin: 0;
}

.quick-entrance {
  display: flex;
  justify-content: space-around;
  padding: 20px;
}

.quick-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.item-icon {
  width: 40px;
  height: 40px;
}

.item-badge {
  background-color: red;
  color: white;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  margin-top: -10px;
  margin-left: 10px;
}

.await-evaluation {
  background-color: white;
  padding: 20px;
  border-radius: 10px;
  margin: 20px;
}

.evaluation-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.product-image {
  width: 80px;
  height: 80px;
  margin-right: 20px;
}

.evaluation-text {
  text-align: left;
}

.evaluate-button {
  background-color: red;
  color: white;
  border: none;
  border-radius: 20px;
  padding: 5px 15px;
}

.pagination {
  text-align: center;
  margin-top: 10px;
}

.other-entrance {
  display: flex;
  flex-direction: column;
  padding: 20px;
}

.other-item {
  display: flex;
  align-items: center;
  padding: 10px 0;
}

.icon {
  width: 30px;
  height: 30px;
  margin-right: 20px;
}

.dot {
  width: 8px;
  height: 8px;
  background-color: red;
  border-radius: 50%;
  margin-left: auto;
}
</style>